<template>
    <div>
        <a-popover :trigger="trigger" :placement="placement" :destroyTooltipOnHide="true" v-if="text && showTips">
            <template slot="title">
                <div>
                    {{title}}
                </div>
            </template>
            <template slot="content">
                <div class="break-word" :style="`min-width:${minWidth}px;max-width: ${maxWidth}px`">
                    <span v-if="isHtml" v-html="text"></span>
                    <span v-if="!isHtml && text">{{text}}</span>
                </div>
            </template>
            <div class="over-one-text-el"
                 :style="`-webkit-line-clamp: ${clamp};min-height: ${height}px;line-height: ${height}px;maxHeight:${height * clamp}px;`">
                <span v-if="isHtml" v-html="text"></span>
                <span v-if="!isHtml && text">{{text}}</span>
            </div>
        </a-popover>
        <div v-if="!showTips" class="over-one-text-el"
             :style="`-webkit-line-clamp: ${clamp};min-height: ${height}px;line-height: ${height}px;maxHeight:${height * clamp}px;`">
            <span v-if="isHtml" v-html="text"></span>
            <span v-if="!isHtml && text">{{text}}</span>
        </div>
    </div>
</template>

<script>
    import {prefix} from '../config';
    export default {
        name: prefix + 'OverText',
        props: {
            isHtml:{ //是否把内容作为html插入
                type: Boolean,
                default: false
            },
            //是否展示提示
            showTips: {
                type: Boolean,
                default: true,
            },
            placement: {
                type: String,
                default: 'bottomLeft'
            },
            //展示方式  可选项 hover，focus， click
            trigger: {
                type: String,
                default: 'hover'
            },
            //展示标题
            title: {
                type: String,
                default: ''
            },
            //展示类容
            text: {
                type: String,
                default: ''
            },
            //展示行数
            clamp: {
                type: Number,
                default: 1
            },
            //高度 行高
            height: {
                type: Number,
                default: 18
            },
            minWidth: {
                type: Number,
                default: 200
            },
            maxWidth: {
                type: Number,
                default: 400
            }
        }
    };
</script>

<style scoped lang="scss">
    .over-one-text-el{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*将对象作为弹性伸缩盒子模型显示。*/
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        /*设置需要显示的行数*/
        -webkit-box-orient: vertical;
        /*设置伸缩盒子的子元素排列方式(从上到下垂直排列)*/
    }
</style>
